import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './index.css';

export default class Item extends Component {

  // 状态
  state = {
    isMove: false
  }

  // 是否移入移出
  isLeave = (val) => {
    return () => this.setState({ isMove: val })
  }

  // 更新列表勾选状态到 state 中 (高级函数)
  todo = (id) => {
    return (e) => {
      this.props.updateList(id, e.target.checked)
    }
  }

  // 删除 （函数的柯理化）
  del = (id) => {
    this.props.delList(id)
  }

  // 定义 props 的数据类型
  static propTypes = {
    item: PropTypes.object.isRequired,
    updateList: PropTypes.func.isRequired
  } 

  render() {
    const { done, id, text } = this.props.item
    const { isMove } = this.state
    return (
      <li onMouseLeave={ this.isLeave(false) } onMouseEnter={ this.isLeave(true) }>
        <label>
          <input type="checkbox" checked={ done } onChange={ this.todo(id) }/>
          <span>{ text }</span>
        </label>
        <button className="btn btn-danger" style={{ display: isMove ? 'block' : 'none' }} onClick={ () => this.del(id) }>删除</button>
      </li>
    );
  }
}
